<template>
  <div class="table-content">
      <Table :columns="columns" :data="tableData" :loading="loading" border>
        <template slot-scope="{ row }" slot="action">
            <img :src="row.goodPics" class="img" @click="handleView(row.goodPics)"/>
        </template>
        <template slot-scope="{ row }" slot="caozuo" style="width:200px">
            <Button size="small" @click="edit(row)" style="margin-right: 5px">编辑</Button>
            <Button type="error" size="small" @click="remove(row.id)">删除</Button>
        </template>
      </Table>
      <Modal title="查看大图" v-model="visible" class="imgModal">
          <img :src="imgSrc"/>
      </Modal>
  </div>
</template>

<script>
export default {
    props: {
        columns: {
            type: Array
        },
        tableData: {
            type: Array
        },
        loading: {
            type: Boolean
        }
    },
    data () {
        return {
            visible: false,
            imgSrc: ''
        }
    },
    methods: {
        edit (row) {
            console.log(row)
            this.$emit('edit', row)
        },
        remove (id) {
            this.$emit('remove', id)
        },
        // 放大图片
        handleView (src) {
            this.visible = true
            this.imgSrc = src
        }
    }
}
</script>

<style scoped>
.imgModal{
    text-align: center;
}
.img{
    width: 50px;
    height: 50px;
}
</style>